音频视频开发问题总结

移动端音频、视频自动播放

有别于 PC 端，移动端浏览器禁止音频和视频自动播放能力，而当前微信内置浏览器是支持自动播放的。

大部分安卓机给 <audio> 或 <video> 标签设置 auto 属性即可；而其它机型（特别是 IOS 系统），则需要在微信 jssdk 加载完毕并触发 ready 事件后，利用 JS 直接调用音频或视频的 play 方法。

参考 直播视频在微信内自动播放

如何禁止移动端 <video> 标签播放视频时自动全屏

参考视频H5のVideo标签在微信里的坑和技巧

iOS

iOS 10 Safari 中，video 新增了 playsinline 属性，可以使视频内联播放。
iOS 10 之前的版本支持 webkit-playsinline

测试发现 iOS 10 以上版本使用 playsinline 达到预期效果，而 iOS 10 之前的版本使用 webkit-playsinline 的达不到预期效果。

推荐使用 iphone-inline-video 解决 iOS 中（包括 iOS 版微信）的兼容问题。

Android

Android 因为由太多厂商定制化，标准很不统一，基本把场景缩小到微信——即兼容QQ浏览器 X5 内核

• 【方案一】

当我们在微信中播放来至腾讯视频的时候，会发现它居然不会被强制全屏，而其它来源的视频都不能幸免。所以，我们可以通过把视频资源上传到腾讯视频再使用。

但是，这个方案有个弊端——播放正片之前，会被强行插入广告。如果不想影响用户体验，可以购买腾讯视频的上传无广告服务，适合有一定经济实力的公司。

腾讯视频VIP会员广告屏蔽特权说明

若想通过腾讯视频上传无广告的作品，属于付费项目，付费标准：3000元/年，每年可以允许5万视频播放量，如果是5-10万播放量，则年费是6000元，以此类推。如果您有兴趣了解，请把项目需求发送至： [e-mail]，会有专门工作人员主动联系您洽谈具体事项，谢谢！

• 【方案二】 网上流传这一种使用 canvas 实现播放的黑科技，算是一种折中方案，对于没钱又追求完美的小公司可以试试。
• 【方案三】 使用腾讯浏览器 H5 同层播放器

iPhone plus 神秘黑屏——只闻其声，不见其人

设备信息

由于是领导的手机，除了知道是 iPhone 7 plus 外没有更多信息

问题重现

部分移动场景中，<video> 会因为层级太高，无法被其它标签覆盖。最开始的解决的思路——在播放是显示 <video> ，停止时隐藏并显示封面图，但是测试 Iphone7 plus 出现异常。

1. 第一次点击播放时，弹窗播放，一切如常。
2. 然后点击后退按钮暂停播放，此时暂停事件被触发，将 <video> 进行隐藏，显示封面图代替。
3. 第二次点击播放时，弹窗播放，只听到声音，看不见图像，一面黑漆漆的。
4. 重复 2，3 状况依旧。

定位问题

几次调试发现，只要不隐藏 <video> 标签问题就得到解决。那么，暂时时将 <video> 定位到视窗之外即可。

X5 启用同层播放后，触发输入动作，导致部分安卓机型播放时黑屏

http://bbs.mb.qq.com/thread-1...

解决方案

目前来看，要么不启用同层播放，要么不要有输入操作